import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    DeviceEventEmitter
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import Loading from "../../utils/Loading";
import Header from "../../components/header";

let navigation

export default class DutyDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            roleId: this.props.route && this.props.route.params && this.props.route.params.roleId ? this.props.route.params.roleId : '',
            totalDuties: this.props.route && this.props.route.params && this.props.route.params.totalDuties ? JSON.parse(this.props.route.params.totalDuties) : [],
            roleName: '',
            roleDesc: '',
            dataArray: [],
        }
    }

    componentDidMount() {
        this.getDutyDetail()
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'职务详情'} RightButton={() => this.renderRightButton()}></Header>

                <View style={{ flex: 1 }}>
                    <FlatList
                        data={this.state.dataArray}
                        ListHeaderComponent={this.renderHeader.bind(this)}
                        renderItem={this.renderItemView.bind(this)}
                        extraData={this.state}
                        onRefresh={this.refreshData}
                        refreshing={this.state.isRefresh}
                    />
                </View>

                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        )
    }

    renderHeader() {
        return (
            <View style={styles.headerBox}>
                <View style={styles.dutyNameBox}>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={styles.dutyNameTitle}>职务名称</Text>
                        <Text style={[styles.dutyNameTitle, { color: 'red', marginLeft: 5 }]}>*</Text>
                    </View>
                    <Text style={styles.dutyNameTitle}>{this.state.roleName}</Text>
                    <View style={styles.sepLine} />
                </View>
                <View style={styles.dutyNameBox}>
                    <Text style={styles.dutyNameTitle}>职务介绍</Text>
                    <Text style={styles.dutyNameTitle}>{this.state.roleDesc}</Text>
                </View>
                <View style={{ width: '100%', height: 10 }} />
                <View style={styles.dutyNameBox}>
                    <Text style={[styles.dutyNameTitle, { fontSize: 17 }]}>授权权限</Text>
                </View>
            </View>
        )
    }

    renderItemView({ item, index }) {
        if (this.state.roleName == '老板' && item.permName == '外部录车') {
            return null
        }else {
            return (
                <View style={styles.dutyBox}>
                    <View style={styles.dot} />
                    <Text style={styles.dutyName}>{item.permName}</Text>
                    {
                        index < this.state.dataArray.length - 1 ?
                            <View style={styles.sepLine} />
                            :
                            null

                    }
                </View>
            )
        }
    }

    renderRightButton() {
        if (this.state.roleName == '老板') {
            return (null)
        } else {
            return (
                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={this.edit}>
                    <View style={styles.rightBox}>
                        <Text style={styles.rightText}>编辑</Text>
                    </View>
                </TouchableOpacity>
            )
        }
    }

    edit = () => {
        navigation.navigate('DutyOperation', {
            roleId: this.state.roleId,
            totalDuties: JSON.stringify(this.state.totalDuties),
            completion: () => {
                this.getDutyDetail()
                if (this.props.route.params && this.props.route.params.completion) {
                    this.props.route.params.completion()
                }
                navigation.goBack()
            }
        })
    }

    getDutyDetail() {
        if (this.Loading) {
            this.Loading.show();
        }
        let param = {
            merchantId: Constant.userInfo.merchantId,
            roleId: this.state.roleId
        }
        HttpUtils.postRequest(HttpUrls.getMerchantRoleDetail, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                let data = result.data
                this.setState({
                    roleName: data.roleName,
                    roleDesc: data.roleDesc,
                    dataArray: data.permissionList
                })
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    rightBox: {
        height: '100%',
        width: 70,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    rightText: {
        fontSize: 16,
        color: '#333333',
        fontWeight: 'bold',
    },
    headerBox: {
        flexDirection: 'column',
        width: '100%',
    },
    dutyNameBox: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 15,
        backgroundColor: '#fff'
    },
    dutyNameTitle: {
        color: '#333',
        fontSize: 15
    },
    sepLine: {
        position: 'absolute',
        bottom: 0,
        left: 15,
        width: '100%',
        height: 0.3,
        backgroundColor: '#d4d4d4',
    },
    dutyBox: {
        width: '100%',
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingLeft: 15,
        backgroundColor: '#fff'
    },
    dot: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: '#333'
    },
    dutyName: {
        color: '#333',
        fontSize: 17,
        marginLeft: 8,
    }

})